<template>
	<view>
		<view class="project_box" v-for="(item,index) in materList" :key="index" @click="materClick(item)">
			<view class="list_top">
				<view class="list_left">
					<image src="http://106.14.56.171:15016/images/pase.png"></image>
					<text>{{item.materialName}}</text>
				</view>
				<view class="list_right">
					<image src="http://106.14.56.171:15016/images/u3063.png"></image>
				</view>
			</view>
			<view class="list_base">
				<view class="base_left">
					<fileImage :src="item.coverUrl" :className="['cidentala']" />
				</view>
				<view class="base_right_materials">
					<view>
						<text class="base_right_text">分类：</text>
						<text class="baseText">{{item.materialType}}</text>
					</view>
					<view>
						<text class="base_right_text">品牌：</text>
						<text class="baseText">{{item.materialBrand}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="zWText noneData" v-if="materList.length == 0">
			<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode=""></image>
			<text>暂无数据...</text>
		</view>
	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	export default {
		props: ["materId"],
		components: {
			fileImage
		},
		data() {
			return {
				id: '', //项目id
				materList: [] //材料数据
			}
		},
		created() {
			this.id = this.materId
			this.materialList()
		},
		methods: {
			materialList() {
				this.$http.get('api/Materials/GetPrjMaterialList?prjInfoId=' + this.id).then((res) => {
					this.materList = res
				})
			},
			//跳转详情
			materClick(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/material/materialdetail?id=' + item.materialId

				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.project_box {
		margin-top: 15rpx;
		width: 96%;
		height: 200rpx;
		border-radius: 24rpx;
		background-color: rgba(255, 255, 255, 1);
		margin-left: 2%;
		margin-bottom: 20rpx;
	}

	.list_top {
		/* width: 100%; */
		height: 40rpx;
		padding-top: 10rpx;
		/* background-color: palegoldenrod; */
		display: flex;
		flex-direction: row;
		justify-content: space-between
	}

	.list_left {
		padding-left: 4%;
	}

	.list_left image {
		float: left;
		margin-top: 5rpx;
		margin-right: 15rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.list_left text {
		box-shadow: none;
		font-family: '微软雅黑 Bold', '微软雅黑';
		font-weight: 700;
		font-style: normal;
		font-size: 30rpx;
	}

	.base_left {
		width: 25%;
		margin-left: 4%;
		// background-color: aqua;
	}

	.list_left text {
		box-shadow: none;
		font-family: '微软雅黑 Bold', '微软雅黑';
		font-weight: 700;
		font-style: normal;
		font-size: 30rpx;
	}

	.list_right {
		padding-right: 4%;
		/* line-height: 40rpx; */
		/* width: 50%; */
		/* background-color: palegreen; */

	}

	.list_right image {
		margin-left: 15rpx;
		width: 10rpx;
		height: 20rpx;
	}

	.list_right text {
		display: inline-block;
		background-color: #ecf4f0;
		height: 40rpx;
		width: 120rpx;
		font-size: 24rpx;
		color: #3E9265;
		border-radius: 20rpx;
		text-align: center;
	}

	.list_base {
		margin-top: 20rpx;
		height: 120rpx;
		/* background-color: brown; */
		display: flex;
		flex-direction: row;
	}

	.base_right_materials {
		width: 80%;
	}

	.base_right_materials view {
		height: 46%;
		margin-top: 5rpx;
		width: 100%;
	}

	.zWText {
		color: #999;
		margin-top: 300rpx;
	}
	// 暂无数据
	.noneData {
		// D:\desktop\项目\ePumpingUniApp\static\images
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
	
		>image {
			margin-top: 200rpx;
			width: 200rpx;
			height: 200rpx;
		}
	
		>text {
			margin-top: 20rpx;
			font-size: 26rpx;
		}
	}

	.base_right_text {
		font-size: 26rpx;
		opacity: 0.6;
	}

	.baseText {
		font-size: 26rpx;
	}
</style>
<style lang="scss">
	.cidentala {
		width: 116rpx;
		height: 116rpx;
		border-radius: 7px;
	}
</style>
